<template>
	<div
	>
		<div class="top" style="display: flex; justify-content:flex-end ; margin: 10px 2px 15px 0px; color: beige;"><i class="el-icon-location-outline" style="margin-right: 5px;" />{{ text }}</div>
	
		
			
			<div class="block">
				 <el-collapse v-model="activeNames" >
					<el-collapse-item title="颜色分级" name="ColorGrading" >
						<el-collapse-item title="白平衡:WhiteBalance" name="WhiteBalance" >
							
								<el-collapse-item title="色温:Temp" name="WhiteTemp"  >
								<div style="display: flex; align-items: center;" >
									<Radio :nameProp='this.sliders[0].name' :objpath='this.ObjectPath' ></Radio>
									<div style="width: 95%; margin-left: 10px;">
										<el-slider v-model="values[0].value"
										:min="1500"
										:max="15000"
										:show-tooltip="false"
										show-input
										:step="0.01"
										@input="slidersput(0,'WhiteTemp')"
										></el-slider>
									</div>	
								</div>
								
							</el-collapse-item>
							
							
							
							<el-collapse-item title="着色:Tint" name="WhiteTint" >
								<div style="display: flex; align-items: center;">
								<Radio :nameProp='this.sliders[1].name' :objpath='this.ObjectPath'></Radio>
								<div style="width: 95%; margin-left: 10px;">
								<el-slider v-model="values[1].value"
								:min="-1"
								:max="1"
								:show-tooltip="false"
								show-input
								:step="0.001"
								@input="slidersput(1,'WhiteTint')"
								></el-slider>
								</div>
								</div>
							</el-collapse-item>
						 </el-collapse-item>
						
						<el-collapse-item title="整体:Global" name="Global" >
							
							<div v-for="(item,i) in this.ColorGrading.Global" :key="i" :title=chinese[i]>	<span class="spancss">{{chinese[i]}}</span>								
									<div style="display: flex; align-items: center;">
									<Radio :nameProp='item.name' :objpath="ObjectPath" ></Radio>
									<div style="width: 95%; margin-left: 10px;">
									<el-color-picker
									 v-model="sourcecolor.Global[i].rgb"
									 show-alpha
									 @active-change="Color=>index(Color, i,item.top)"
									 @change="Color=>change(Color, i,item.top)"
									
									 :predefine="predefineColors">
									</el-color-picker>
									</div>
									</div>
							</div>	
						</el-collapse-item>
						
						<el-collapse-item title="阴影:Shadows" name="Shadows" >
							<el-collapse-item  :name=item.name v-for="(item,i) in this.ColorGrading.Shadows" :key="i"  :title=chinese[i] >
									
									<div style="display: flex; align-items: center;">
									<Radio :nameProp='item.name':objpath="ObjectPath" ></Radio>
									<div style="width: 95%; margin-left: 10px;">
									<el-color-picker
									 v-model="sourcecolor.Shadows[i].rgb"
									 show-alpha
									 @active-change="Color=>index(Color, i,item.top)"
									 @change="Color=>change(Color, i,item.top)"
									
									 :predefine="predefineColors">
									</el-color-picker>
									</div>
									</div>
									
							</el-collapse-item>
							
							<el-collapse-item title="最大阴影:ShadowsMax" name="ShadowsMax" >
								<div style="display: flex; align-items: center;">
								<Radio :nameProp='this.sliders[2].name' :objpath='this.ObjectPath'></Radio>
								<div style="width: 95%; margin-left: 10px;">	
								<el-slider v-model="values[2].value"
								:min="-1"
								:max="1"
								:show-tooltip="false"
								show-input
								:step="0.001"
								@input="slidersput(2,'ShadowsMax')"
								></el-slider>
								</div>
								</div>
							</el-collapse-item>
						</el-collapse-item>
						
						<el-collapse-item title="中间色调:Midtones" name="Midtones" >
							<el-collapse-item  :name=item.name v-for="(item,i) in this.ColorGrading.Midtones" :key="i" :title=chinese[i] >
								<div style="display: flex; align-items: center;">
								<Radio :nameProp='item.name':objpath="ObjectPath" ></Radio>
								<div style="width: 95%; margin-left: 10px;">
								
									<el-color-picker
									 v-model="sourcecolor.Midtones[i].rgb"
									 show-alpha
									 @active-change="Color=>index(Color, i,item.top)"
									 @change="Color=>change(Color, i,item.top)"
									
									 :predefine="predefineColors">
									</el-color-picker>
									</div>
									</div>
							</el-collapse-item>	
						</el-collapse-item>
						
						<el-collapse-item title="高光区域:Highlights" name="Highlights" >
							
							<el-collapse-item  :name=item.name v-for="(item,i) in this.ColorGrading.Highlights" :key="i" :title=chinese[i] >
								<div style="display: flex; align-items: center;">
								<Radio :nameProp='item.name':objpath="ObjectPath" ></Radio>
								<div style="width: 95%; margin-left: 10px;">
									<el-color-picker
									 v-model="sourcecolor.Highlights[i].rgb"
									 show-alpha
									 @active-change="Color=>index(Color, i,item.top)"
									 @change="Color=>change(Color, i,item.top)"
									
									 :predefine="predefineColors">
									</el-color-picker>
									</div>
									</div>
							</el-collapse-item>	
							
							<el-collapse-item title="最小高光:HighlightsMin" name="HighlightsMin" >
								<div style="display: flex; align-items: center;">
								<Radio :nameProp='this.sliders[3].name' :objpath='this.ObjectPath'></Radio>
								<div style="width: 95%; margin-left: 10px;">	
								<el-slider v-model="values[3].value"
								:min="-1"
								:max="1"
								:show-tooltip="false"
								show-input
								:step="0.001"
								@input="slidersput(3,'HighlightsMin')"
								></el-slider>
								</div>
								</div>
							</el-collapse-item>
							
						</el-collapse-item>
						
						<el-collapse-item title="杂项:Misc" name="Misc" >
							
							<!-- <el-collapse-item  :name=item.name v-for="(item,i) in this.ColorGrading.Highlights" :key="i" :title=chinese[i] >
								<div style="display: flex; align-items: center;">
								<Radio :nameProp='item.name':objpath="ObjectPath" ></Radio>
								<div style="width: 95%; margin-left: 10px;">
									<el-color-picker
									 v-model="sourcecolor.Highlights[i].rgb"
									 show-alpha
									 @active-change="Color=>index(Color, i,item.top)"
									 @change="Color=>change(Color, i,item.top)"
									
									 :predefine="predefineColors">
									</el-color-picker>
									</div>
									</div>
							</el-collapse-item>	 -->
							
							<el-collapse-item  :name="item" v-for="(item ,i) in Misc" :title="item" :key="i" >
								<div style="display: flex; align-items: center;">
								 <Radio :nameProp='item' :objpath='ObjectPath'></Radio>
								 <div style="width: 95%; margin-left: 10px;">
								<el-slider v-model="Miscvalues[i].value"
								:min="0"
								:max="1"
								:show-tooltip="false"
								show-input
								:step="0.001"
								@input="slidersput(i+10, item)"
								></el-slider>
								</div>
								</div>
								
							</el-collapse-item>
							
						</el-collapse-item>
						
						
						
									
					 </el-collapse-item>
					 
					 
					 
					 
					 
					 <el-collapse-item title="电影" name="Film">
						
						 <el-collapse-item title="斜面:FilmSlope" name="FilmSlope" >
							 <div style="display: flex; align-items: center;">
							 <Radio :nameProp='this.sliders[4].name' :objpath='this.ObjectPath'></Radio>
							 <div style="width: 95%; margin-left: 10px;">
						 	<el-slider v-model="values[4].value"
						 	:min="0"
						 	:max="1"
						 	:show-tooltip="false"
						 	show-input
						 	:step="0.001"
						 	@input="slidersput(4,'FilmSlope')"
						 	></el-slider>
							</div>
							</div>
						 </el-collapse-item>
						 
						 <el-collapse-item title="趾部:FilmToe" name="FilmToe" >
							 <div style="display: flex; align-items: center;">
							 <Radio :nameProp='this.sliders[5].name' :objpath='this.ObjectPath'></Radio>
							 <div style="width: 95%; margin-left: 10px;">
						 	<el-slider v-model="values[5].value"
						 	:min="0"
						 	:max="1"
						 	:show-tooltip="false"
						 	show-input
						 	:step="0.001"
						 	@input="slidersput(5,'FilmToe')"
						 	></el-slider>
							</div>
							</div>
						 </el-collapse-item>
						 
						 <el-collapse-item title="肩部:FilmShoulder" name="FilmShoulder" >
							 <div style="display: flex; align-items: center;">
							 <Radio :nameProp='this.sliders[6].name' :objpath='this.ObjectPath'></Radio>
							 <div style="width: 95%; margin-left: 10px;">
						 	<el-slider v-model="values[6].value"
						 	:min="0"
						 	:max="1"
						 	:show-tooltip="false"
						 	show-input
						 	:step="0.001"
						 	@input="slidersput(6,'FilmShoulder')"
						 	></el-slider>
							</div>
							</div>
						 </el-collapse-item>
						 
						 <el-collapse-item title="黑色调:FilmBlackClip" name="FilmBlackClip" >
							 <div style="display: flex; align-items: center;">
							 <Radio :nameProp='this.sliders[7].name' :objpath='this.ObjectPath'></Radio>
							 <div style="width: 95%; margin-left: 10px;">
						 	<el-slider v-model="values[7].value"
						 	:min="0"
						 	:max="1"
						 	:show-tooltip="false"
						 	show-input
						 	:step="0.001"
						 	@input="slidersput(7,'FilmBlackClip')"
						 	></el-slider>
							</div>
							</div>
						 </el-collapse-item>
						 
						 <el-collapse-item title="白色调:FilmWhiteClip" name="FilmWhiteClip" >
							 <div style="display: flex; align-items: center;">
							 <Radio :nameProp='this.sliders[8].name' :objpath='this.ObjectPath'></Radio>
							 <div style="width: 95%; margin-left: 10px;">
						 	<el-slider v-model="values[8].value"
						 	:min="0"
						 	:max="1"
						 	:show-tooltip="false"
						 	show-input
						 	:step="0.001"
						 	@input="slidersput(8,'FilmWhiteClip')"
						 	></el-slider>
							</div>
							</div>
						 </el-collapse-item>
						 
						
						
					</el-collapse-item>
				</el-collapse>
				
			</div>
			
		   <!-- <button @click="dianji()">测试</button> -->
	</div>
</template>

<script>
    import Radio from '../../components/Radio.vue'
    export default {
        components: {
            Radio
        },
        data() {
            return {
                loading: true,
                activeNames: [],
                value2: 2500,
                value3: 0,

                sourcecolor: {
                    "Global": [{
                        rgb: ""
                    }, {
                        rgb: "rgba(157, 2, 72, 1)"
                    }, {
                        rgb: "rgba(157, 22, 72, 1)"
                    }, {
                        rgb: "rgba(157, 32, 92, 1)"
                    }, {
                        rgb: "rgba(157, 42, 112, 1)"
                    }],
                    "Shadows": [{
                        rgb: "rgba(157, 42, 112, 1)"
                    }, {
                        rgb: "rgba(157, 42, 112, 1)"
                    }, {
                        rgb: "rgba(157, 42, 112, 1)"
                    }, {
                        rgb: "rgba(157, 42, 112, 1)"
                    }, {
                        rgb: "rgba(157, 42, 112, 1)"
                    }, ],
                    "Midtones": [{
                        rgb: "rgba(157, 42, 112, 1)"
                    }, {
                        rgb: "rgba(157, 42, 112, 1)"
                    }, {
                        rgb: "rgba(157, 42, 112, 1)"
                    }, {
                        rgb: "rgba(157, 42, 112, 1)"
                    }, {
                        rgb: "rgba(157, 42, 112, 1)"
                    }, ],
                    "Midtones": [{
                            rgb: "rgba(157, 42, 112, 1)"
                        }, {
                            rgb: "rgba(157, 42, 112, 1)"
                        }, {
                            rgb: "rgba(157, 42, 112, 1)"
                        }, {
                            rgb: "rgba(157, 42, 112, 1)"
                        }, {
                            rgb: "rgba(157, 42, 112, 1)"
                        },

                    ],
                    "Highlights": [{
                        rgb: "rgba(157, 42, 112, 1)"
                    }, {
                        rgb: "rgba(157, 42, 112, 1)"
                    }, {
                        rgb: "rgba(157, 42, 112, 1)"
                    }, {
                        rgb: "rgba(157, 42, 112, 1)"
                    }, {
                        rgb: "rgba(157, 42, 112, 1)"
                    }, ]
                },





                predefineColors: [
                    '#ff4500',
                    '#ff8c00',
                    '#ffd700',
                    '#90ee90',
                    '#00ced1',
                    '#1e90ff',
                    '#c71585',
                    'rgba(255, 69, 0, 0.68)',
                    'rgb(255, 120, 0)',
                    'hsv(51, 100, 98)',
                    'hsva(120, 40, 94, 0.5)',
                    'hsl(181, 100%, 37%)',
                    'hsla(209, 100%, 56%, 0.73)',
                    '#c7158577'
                ],

                socket: "",
                text: 'PostProcess',
                ObjectPath: '',
                Access: "WRITE_TRANSACTION_ACCESS",

                LightColor: {
                    R: '',
                    G: '',
                    B: '',
                    A: ''
                },


                ifvalue2: '',

                Colorselect: {
                    "Global": [{
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }, {
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }, {
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }, {
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }, {
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }],
                    "Shadows": [{
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }, {
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }, {
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }, {
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }, {
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }],
                    "Midtones": [{
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }, {
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }, {
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }, {
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }, {
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }],
                    "Highlights": [{
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }, {
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }, {
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }, {
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }, {
                        color: {
                            R: '',
                            G: '',
                            B: '',
                            A: ''
                        }
                    }]
                },



                ColorGrading: {
                    "Global": [{
                        name: "ColorSaturation",
                        top: "Global",
                        objpath: "/Game/NewMap.NewMap:PersistentLevel.PostProcessVolume_1"
                    }, {
                        name: "ColorContrast",
                        top: "Global"
                    }, {
                        name: "ColorGamma",
                        top: "Global"
                    }, {
                        name: "ColorGain",
                        top: "Global"
                    }, {
                        name: "ColorOffset",
                        top: "Global"
                    }, ],
                    "Shadows": [{
                        name: "ColorSaturationShadows",
                        top: "Shadows"
                    }, {
                        name: "ColorContrastShadows",
                        top: "Shadows"
                    }, {
                        name: "ColorGammaShadows",
                        top: "Shadows"
                    }, {
                        name: "ColorGainShadows",
                        top: "Shadows"
                    }, {
                        name: "ColorOffsetShadows",
                        top: "Shadows"
                    }, ],
                    "Midtones": [{
                        name: "ColorSaturationMidtones",
                        top: "Midtones"
                    }, {
                        name: "ColorContrastMidtones",
                        top: "Midtones"
                    }, {
                        name: "ColorGammaMidtones",
                        top: "Midtones"
                    }, {
                        name: "ColorGainMidtones",
                        top: "Midtones"
                    }, {
                        name: "ColorOffsetMidtones",
                        top: "Midtones"
                    }, ],
                    "Highlights": [{
                            name: "ColorSaturationHighlights",
                            top: "Highlights"
                        }, {
                            name: "ColorContrastHighlights",
                            top: "Highlights"
                        }, {
                            name: "ColorGammaHighlights",
                            top: "Highlights"
                        }, {
                            name: "ColorGainHighlights",
                            top: "Highlights"
                        }, {
                            name: "ColorOffsetHighlights",
                            top: "Highlights"
                        },

                    ],

                },
                Misc: [
                    "BlueCorrection",
                    "ExpandGamut",
                    "ToneCurveAmount",
                    "ColorGradingIntensity",
                ],
                Miscvalues: [{
                        value: 0.6
                    }, {
                        value: 1
                    }, {
                        value: 1
                    }, {
                        value: 1
                    },

                ],
                chinese: [
                    "饱和度",
                    "对比度",
                    "伽马",
                    "增益",
                    "偏差",
                ],
                values: [{
                    value: 6500
                }, {
                    value: 0
                }, {
                    value: 0.09
                }, {
                    value: 0.5
                }, {
                    value: 0.6
                }, {
                    value: 1
                }, {
                    value: 1
                }, {
                    value: 1
                }, {
                    value: 1
                }, ],

                sliders: [

                    {
                        name: "WhiteTemp"
                    }, {
                        name: "WhiteTint"
                    }, {
                        name: "ColorCorrectionShadowsMax"
                    }, {
                        name: "ColorCorrectionHighlightsMin"
                    }, {
                        name: "FilmSlope"
                    }, {
                        name: "FilmToe"
                    }, {
                        name: "FilmShoulder"
                    }, {
                        name: "FilmBlackClip"
                    }, {
                        name: "FilmWhiteClip"
                    },


                ],
                tests: ''


            }
        },
        mounted() {
            // this.changeData()
            this.GetObjectPath()
                // this.getstorevalue()
                // console.log(this.Colorselect.Shadows[1].name)
        },
        computed: {
            // 	value2(){
            // 		return this.$store.state.postvalue
            // 	}

        },
        methods: {


            slidersput(n, slidername) {
                let array = this.activeNames
                let json = {
                    "Settings": {}
                }
                let matcharr = array.indexOf(slidername)
                    // console.log(this.Miscvalues[0].value)
                if (matcharr > 0) {
                    if (n >= 10) {
                        let name = slidername
                        let indexs = n - 10

                        json.Settings[name] = this.Miscvalues[indexs].value
                    } else {
                        let name = this.sliders[n].name

                        json.Settings[name] = this.values[n].value
                    }




                    this.axios.put('/remote/object/property', {
                            "objectPath": this.ObjectPath,
                            "access": this.Access,
                            "propertyName": "Settings",
                            "propertyValue": json


                        }, {
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }


                    ).then((res) => {
                            console.log(1111111111)

                        },
                        (err) => {

                        }
                    )
                }



            },

            change(color, n, name) {
                let names, json2;
                // console.log(name)
                let upname = this.ColorGrading;
                for (let i in upname) {
                    upname = i.match(name)
                    if (upname != null) {
                        if (upname.input == 'Global') {
                            names = this.ColorGrading.Global[n].name
                        } else if (upname.input == 'Shadows') {
                            names = this.ColorGrading.Shadows[n].name
                        } else if (upname.input == 'Midtones') {
                            names = this.ColorGrading.Midtones[n].name
                        } else if (upname.input == 'Highlights') {
                            names = this.ColorGrading.Highlights[n].name
                        }

                    }


                }






                if (color == null) {
                    json2 = {
                        X: 1,
                        Y: 1,
                        Z: 1,
                        W: 1
                    }

                }
                // let json3 ={
                // 	"Settings":{

                // 	}
                // }
                // json3.seting[names]=json2
                let json = {
                    "Settings": {

                    }
                }
                json.Settings[names] = json2

                if (color == null) {
                    this.axios.put('/remote/object/property', {
                            "objectPath": this.ObjectPath,
                            "access": this.Access,
                            "propertyName": "Settings",
                            "propertyValue": json


                        }, {
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }


                    ).then((res) => {
                        // this.setthisvalue(2)

                    })

                }



            },
            index(color, n, name) {
                // this.ifvalue2=2
                // console.log(name,'111111111111111111')
                let upname1, upname2;
                var c = color;
                var rgb = (c.toString()).replace(/^rgba?\(|\s+|\)$/g, '').split(',');
                let upname = this.ColorGrading;
                for (let i in upname) {
                    upname1 = i.match(name)
                        // console.log(name,'111111111111111111')
                    if (upname1 != null) {

                        if (upname1.input == "Global") {

                            this.Colorselect.Global[n].color.R = parseInt(rgb[0]);
                            this.Colorselect.Global[n].color.G = parseInt(rgb[1]);
                            this.Colorselect.Global[n].color.B = parseInt(rgb[2]);
                            this.Colorselect.Global[n].color.A = rgb[3];
                            let max = this.Colorselect.Global[n].color.R
                            for (let i in this.Colorselect.Global[n].color) {
                                var cat = this.Colorselect.Global[n].color[i]
                                cat > max ? max = cat : null

                            }
                            for (let i in this.Colorselect.Global[n].color) {
                                this.Colorselect.Global[n].color[i] = parseInt(this.Colorselect.Global[n].color[i] / max * 1000) / 1000
                                if (this.Colorselect.Global[n].color[i] == this.Colorselect.Global[n].color.A) {
                                    this.Colorselect.Global[n].color[i] = parseInt(rgb[3] * 100) / 100

                                }
                            }
                            this.tests = this.Colorselect.Global[n].color

                        } else if (upname1.input == "Shadows") {
                            this.Colorselect.Shadows[n].color.R = parseInt(rgb[0]);
                            this.Colorselect.Shadows[n].color.G = parseInt(rgb[1]);
                            this.Colorselect.Shadows[n].color.B = parseInt(rgb[2]);
                            this.Colorselect.Shadows[n].color.A = rgb[3];
                            let max = this.Colorselect.Shadows[n].color.R
                            for (let i in this.Colorselect.Shadows[n].color) {
                                var cat = this.Colorselect.Shadows[n].color[i]
                                cat > max ? max = cat : null

                            }
                            for (let i in this.Colorselect.Shadows[n].color) {
                                this.Colorselect.Shadows[n].color[i] = parseInt(this.Colorselect.Shadows[n].color[i] / max * 1000) / 1000
                                if (this.Colorselect.Shadows[n].color[i] == this.Colorselect.Shadows[n].color.A) {
                                    this.Colorselect.Shadows[n].color[i] = parseInt(rgb[3] * 100) / 100

                                }
                            }

                        } else if (upname1.input == "Midtones") {
                            this.Colorselect.Midtones[n].color.R = parseInt(rgb[0]);
                            this.Colorselect.Midtones[n].color.G = parseInt(rgb[1]);
                            this.Colorselect.Midtones[n].color.B = parseInt(rgb[2]);
                            this.Colorselect.Midtones[n].color.A = rgb[3];
                            let max = this.Colorselect.Midtones[n].color.R
                            for (let i in this.Colorselect.Midtones[n].color) {
                                var cat = this.Colorselect.Midtones[n].color[i]
                                cat > max ? max = cat : null

                            }
                            for (let i in this.Colorselect.Midtones[n].color) {
                                this.Colorselect.Midtones[n].color[i] = parseInt(this.Colorselect.Midtones[n].color[i] / max * 1000) / 1000
                                if (this.Colorselect.Midtones[n].color[i] == this.Colorselect.Midtones[n].color.A) {
                                    this.Colorselect.Midtones[n].color[i] = parseInt(rgb[3] * 100) / 100

                                }
                            }

                        } else if (upname1.input == "Highlights") {
                            this.Colorselect.Highlights[n].color.R = parseInt(rgb[0]);
                            this.Colorselect.Highlights[n].color.G = parseInt(rgb[1]);
                            this.Colorselect.Highlights[n].color.B = parseInt(rgb[2]);
                            this.Colorselect.Highlights[n].color.A = rgb[3];
                            let max = this.Colorselect.Highlights[n].color.R
                            for (let i in this.Colorselect.Highlights[n].color) {
                                var cat = this.Colorselect.Highlights[n].color[i]
                                cat > max ? max = cat : null

                            }
                            for (let i in this.Colorselect.Highlights[n].color) {
                                this.Colorselect.Highlights[n].color[i] = parseInt(this.Colorselect.Highlights[n].color[i] / max * 1000) / 1000
                                if (this.Colorselect.Highlights[n].color[i] == this.Colorselect.Highlights[n].color.A) {
                                    this.Colorselect.Highlights[n].color[i] = parseInt(rgb[3] * 100) / 100

                                }
                            }

                        } else if (upname1.input == "Mise") {
                            this.Colorselect.Mise[n].color.R = parseInt(rgb[0]);
                            this.Colorselect.Mise[n].color.G = parseInt(rgb[1]);
                            this.Colorselect.Mise[n].color.B = parseInt(rgb[2]);
                            this.Colorselect.Mise[n].color.A = rgb[3];
                            let max = this.Colorselect.Mise[n].color.R
                            for (let i in this.Colorselect.Mise[n].color) {
                                var cat = this.Colorselect.Mise[n].color[i]
                                cat > max ? max = cat : null

                            }
                            for (let i in this.Colorselect.Mise[n].color) {
                                this.Colorselect.Mise[n].color[i] = parseInt(this.Colorselect.Mise[n].color[i] / max * 1000) / 1000
                                if (this.Colorselect.Mise[n].color[i] == this.Colorselect.Mise[n].color.A) {
                                    this.Colorselect.Mise[n].color[i] = parseInt(rgb[3] * 100) / 100

                                }
                            }

                        }
                    }
                }

















                let names, json2;

                // let upname = this.ColorGrading;
                for (let i in upname) {
                    upname2 = i.match(name)
                        // console.log('index if 内部',upname2)
                    if (upname2 != null) {

                        if (upname2.input == "Global") {

                            names = this.ColorGrading.Global[n].name
                            json2 = {
                                X: this.Colorselect.Global[n].color.R,
                                Y: this.Colorselect.Global[n].color.G,
                                Z: this.Colorselect.Global[n].color.B,
                                W: this.Colorselect.Global[n].color.A
                            }

                        } else if (upname2.input == "Shadows") {
                            names = this.ColorGrading.Shadows[n].name
                            json2 = {
                                X: this.Colorselect.Shadows[n].color.R,
                                Y: this.Colorselect.Shadows[n].color.G,
                                Z: this.Colorselect.Shadows[n].color.B,
                                W: this.Colorselect.Shadows[n].color.A
                            }
                        } else if (upname2.input == "Midtones") {
                            names = this.ColorGrading.Midtones[n].name
                            json2 = {
                                X: this.Colorselect.Midtones[n].color.R,
                                Y: this.Colorselect.Midtones[n].color.G,
                                Z: this.Colorselect.Midtones[n].color.B,
                                W: this.Colorselect.Midtones[n].color.A
                            }
                        } else if (upname2.input == "Highlights") {
                            names = this.ColorGrading.Highlights[n].name
                            json2 = {
                                X: this.Colorselect.Highlights[n].color.R,
                                Y: this.Colorselect.Highlights[n].color.G,
                                Z: this.Colorselect.Highlights[n].color.B,
                                W: this.Colorselect.Highlights[n].color.A
                            }
                        } else if (upname2.input == "Mise") {
                            names = this.ColorGrading.Mise[n].name
                            json2 = {
                                X: this.Colorselect.Mise[n].color.R,
                                Y: this.Colorselect.Mise[n].color.G,
                                Z: this.Colorselect.Mise[n].color.B,
                                W: this.Colorselect.Mise[n].color.A
                            }
                        }


                    }
                }

                if (color == null) {
                    json2 = {
                        X: 1,
                        Y: 1,
                        Z: 1,
                        W: 1
                    }

                }
                // let json3 ={
                // 	"Settings":{

                // 	}
                // }
                // json3.seting[names]=json2
                let json = {
                    "Settings": {

                    }
                }
                json.Settings[names] = json2
                    // console.log(json)


                // json2.R != '' &&
                if (json2 != null && this.activeNames.length > 1) {
                    this.axios.put('/remote/object/property', {
                            "objectPath": this.ObjectPath,
                            "access": this.Access,
                            "propertyName": "Settings",
                            "propertyValue": json


                        }, {
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }


                    ).then((res) => {
                        // this.setthisvalue(2)
                        // console.log(res)	

                    })

                }

            },
            setthisvalue(n) {
                if (n == 1) {
                    this.$store.commit('setpostvalue', this.value2)

                } else if (n == 2) {
                    this.$store.commit('setpostcolor', this.color)

                }


            },
            getstorevalue() {
                this.value2 = this.$store.state.postvalue
                this.color = this.$store.state.postcolor
            },

            GetObjectPath() {
                let Matchname, objectPath, SelectionName;

                let textobjname = this.$store.state.objectPath.ReturnValue
                let textname = this.$store.state.address
                for (let i = 0; i < textname.length; i++) {
                    if (textname[i].value != "") {
                        let Vehiclename = textname[i].value
                        let VehicleMatchname = Vehiclename.match('PostProcess')
                        if (VehicleMatchname != null) {
                            SelectionName = VehicleMatchname.input

                        }

                    }

                }

                console.log(SelectionName)
                for (let i = 0; i < textobjname.length; i++) {

                    Matchname = textobjname[i].match(SelectionName)
                        // if(textobjname[i].)
                    if (Matchname != null) {
                        objectPath = Matchname.input
                        this.ObjectPath = objectPath

                        console.log(objectPath)

                    }

                }
                // let test =text.ReturnValue.match('PostProcessVolume')

            },

            slidervalue() {

                if (this.value2 != 0) {
                    this.axios.put('/remote/object/property', {
                            "objectPath": this.ObjectPath,
                            "access": this.Access,
                            "propertyName": "Settings",
                            "propertyValue": {
                                "Settings": {
                                    "AutoExposureBias": this.value2
                                }
                            }


                        }, {
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }


                    ).then((res) => {

                            // this.setthisvalue(1)
                        },
                        (err) => {

                        }
                    )
                }

            },

        }



    }
</script>

<style>
    .block {
        width: 95%;
    }
    /* .demonstration{
		margin-top: 2px;
		margin-bottom: 10PX;
		display: flex;
		justify-content: flex-start;
		margin-left: -10px;
	} */
    
    .el-color-picker {
        width: 100%;
        margin-top: 10px;
    }
    
    .el-color-picker__trigger {
        width: 100%;
        height: 30px;
    }
    
    .el-collapse-item__header {
        background-color: #333A46;
        font-size: 25px;
        border-bottom: #333A46;
        color: #FFFFFF;
        text-align: center;
    }
    
    .el-collapse-item__content {
        background-color: #333A46;
        margin-left: 10px;
        /* border-bottom: #333A46; */
        padding-bottom: 10px;
    }
    
    .el-collapse-item__wrap {
        background-color: #333A46;
        border-bottom: #333A46;
    }
    
    .el-collapse-item__header :last-child {
        /* background-color: red; */
        /* border-bottom: #333A46; */
    }
    
    .spancss {
        color: #FFFFFF;
        font-size: 20px
    }
    
    .el-checkbox__inner {
        width: 30px;
        height: 30px
    }
    
    .el-checkbox__inner::after {
        height: 26px;
        left: 13px
    }
</style>